<template>
  <div class="rankinglist">

    <!-- 右边榜单列表 -->
    <div class="right">
      <div class="right-one">
        <div class="biaoshengbf">
          <div class="biaoshengimg">
            <img src="./images/biaoshengbang.jpg" alt="" />
          </div>
          <div class="biaoshenginfo">
            <div class="xddmm">
              <p>飙升榜</p>
            </div>
            <div class="xddmmk">
              <img src="./images/时间.jpg" alt="" />
              <span style="margin-left:5px">最近更新:06月01日</span>
              <span>（更新68首）</span>
            </div>
            <div class="xddmmkt">
              <el-button type="primary" size="mini" icon="el-icon-video-play"
                >播放</el-button
              >
              <el-button size="mini" icon="el-icon-folder-add"
                >123456</el-button
              >
              <el-button size="mini" icon="el-icon-folder-checked"
                >9527</el-button
              >
              <el-button size="mini" icon="el-icon-download">下载</el-button>
            </div>
          </div>
        </div>
        <!-- 右边歌曲列表 -->
        <div class="songlist">
          <div class="songlistone">
            <h3>歌曲列表</h3>
            <span>100首歌</span>
            <span class="bofang">播放：<strong>4295013376</strong>次</span>
          </div>
        </div>
        <el-table
          class="tablebur"
          :data="tableData"
          stripe
          style="width: 680px"
          size="mini"
        >
          <el-table-column prop="date" label="" width="58"> </el-table-column>
          <el-table-column label="">
            <template>
              <img
                src="./images/ssss.jpg"
                width="45"
                height="45"
                class="head_pic"
              />
            </template>
          </el-table-column>
          <el-table-column label="">
            <template>
              <img
                src="./images/1622551385(1).jpg"
                width="26"
                height="26"
                class="head_pic"
              />
            </template>
          </el-table-column>
          <el-table-column prop="songname" label="标题" width="310">
          </el-table-column>
          <el-table-column prop="time" label="时长" width="80">
          </el-table-column>
          <el-table-column prop="address" label="歌手" width="70">
          </el-table-column>
        </el-table>
        <!-- 评论区 -->
        <div class="songlist">
          <div class="songlistone">
            <h3>评论</h3>
            <span>共95279527条评论</span>
          </div>
        </div>
        <div class="comment">
          <div class="comment-title">
            <div class="comment-textarea">
              <img src="./images/touxiang.jpg" alt="" />
              <textarea
                name=""
                id=""
                cols="98"
                rows="5"
                placeholder="评论"
              ></textarea>
            </div>
            <div class="nice">
              <img src="./images/23123(1).jpg" alt="" />
              <img src="./images/123.jpg" alt="" />
              <div class="pinlunbtn">
                <span style="color: gray;margin-right:5px;">140</span>
                <el-button type="primary" size="mini">评论</el-button>
              </div>
            </div>
          </div>
          <!-- 精彩评论区 -->
          <div class="songlist-1">
            <span>精彩评论</span>
            <div class="commentlist">
              <div class="flex">
                <img src="./images/touxiang.jpg" alt="" />
                <div class="commenttext">
                  <a href="#" style="color:blue">甄春辉</a>
                  <span
                    >：许巍有《蓝莲花》高梨康治有《红莲》翁大涵有《白莲》马琪龙有《青莲》，最近又火了一个啥榴莲，我孙某人只有不要b莲</span
                  >
                </div>
              </div>
              <div class="commentnice">
                <span>1942年11月26日</span>
                <div class="dianzan">
                  <a href="#"><span class="el-icon-star-off">（9527）</span></a>
                  <span class="niceshu">|</span>
                  <a href="#"><span>回复</span></a>
                </div>
              </div>
            </div>
            <div class="commentlist">
              <div class="flex">
                <img src="./images/touxiang.jpg" alt="" />
                <div class="commenttext">
                  <a href="#" style="color:blue">甄春辉</a>
                  <span
                    >：许巍有《蓝莲花》高梨康治有《红莲》翁大涵有《白莲》马琪龙有《青莲》，最近又火了一个啥榴莲，我孙某人只有不要b莲</span
                  >
                </div>
              </div>
              <div class="commentnice">
                <span>1942年11月26日</span>
                <div class="dianzan">
                  <a href="#"><span class="el-icon-star-off">（9527）</span></a>
                  <span class="niceshu">|</span>
                  <a href="#"><span>回复</span></a>
                </div>
              </div>
            </div>
            <div class="commentlist">
              <div class="flex">
                <img src="./images/touxiang.jpg" alt="" />
                <div class="commenttext">
                  <a href="#" style="color:blue">甄春辉</a>
                  <span
                    >：许巍有《蓝莲花》高梨康治有《红莲》翁大涵有《白莲》马琪龙有《青莲》，最近又火了一个啥榴莲，我孙某人只有不要b莲</span
                  >
                </div>
              </div>
              <div class="commentnice">
                <span>1942年11月26日</span>
                <div class="dianzan">
                  <a href="#"><span class="el-icon-star-off">（9527）</span></a>
                  <span class="niceshu">|</span>
                  <a href="#"><span>回复</span></a>
                </div>
              </div>
            </div>
            <div class="commentlist">
              <div class="flex">
                <img src="./images/touxiang.jpg" alt="" />
                <div class="commenttext">
                  <a href="#" style="color:blue">甄春辉</a>
                  <span
                    >：许巍有《蓝莲花》高梨康治有《红莲》翁大涵有《白莲》马琪龙有《青莲》，最近又火了一个啥榴莲，我孙某人只有不要b莲</span
                  >
                </div>
              </div>
              <div class="commentnice">
                <span>1942年11月26日</span>
                <div class="dianzan">
                  <a href="#"><span class="el-icon-star-off">（9527）</span></a>
                  <span class="niceshu">|</span>
                  <a href="#"><span>回复</span></a>
                </div>
              </div>
            </div>
            <div class="commentlist">
              <div class="flex">
                <img src="./images/touxiang.jpg" alt="" />
                <div class="commenttext">
                  <a href="#" style="color:blue">甄春辉</a>
                  <span
                    >：许巍有《蓝莲花》高梨康治有《红莲》翁大涵有《白莲》马琪龙有《青莲》，最近又火了一个啥榴莲，我孙某人只有不要b莲</span
                  >
                </div>
              </div>
              <div class="commentnice">
                <span>1942年11月26日</span>
                <div class="dianzan">
                  <a href="#"><span class="el-icon-star-off">（9527）</span></a>
                  <span class="niceshu">|</span>
                  <a href="#"><span>回复</span></a>
                </div>
              </div>
            </div>
            <div class="commentlist">
              <div class="flex">
                <img src="./images/touxiang.jpg" alt="" />
                <div class="commenttext">
                  <a href="#" style="color:blue">甄春辉</a>
                  <span
                    >：许巍有《蓝莲花》高梨康治有《红莲》翁大涵有《白莲》马琪龙有《青莲》，最近又火了一个啥榴莲，我孙某人只有不要b莲</span
                  >
                </div>
              </div>
              <div class="commentnice">
                <span>1942年11月26日</span>
                <div class="dianzan">
                  <a href="#"><span class="el-icon-star-off">（9527）</span></a>
                  <span class="niceshu">|</span>
                  <a href="#"><span>回复</span></a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RankingList',
  data() {
    return {
      tableData: [
        {
          date: '1',
          songname: '纤夫的爱',
          time: '88:88',
          address: '甄春辉'
        },
        {
          date: '2',
          time: '88:88',
          songname: '纤夫的爱',
          address: '甄春辉'
        },
        {
          date: '3',
          time: '88:88',
          songname: '纤夫的爱',
          address: '甄春辉'
        },
        {
          date: '4',
          time: '88:88',
          songname: '纤夫的爱',
          address: '甄春辉'
        },
        {
          date: '5',
          time: '88:88',
          songname: '纤夫的爱',
          address: '甄春辉'
        },
        {
          date: '6',
          time: '88:88',
          songname: '纤夫的爱',
          address: '甄春辉'
        },
        {
          date: '7',
          time: '88:88',
          songname: '纤夫的爱',
          address: '甄春辉'
        },
        {
          date: '8',
          time: '88:88',
          songname: '纤夫的爱',
          address: '甄春辉'
        },
        {
          date: '9',
          time: '88:88',
          songname: '纤夫的爱',
          address: '甄春辉'
        },
        {
          date: '10',
          time: '88:88',
          songname: '纤夫的爱',
          address: '甄春辉'
        }
      ]
    }
  }
}
</script>

<style>
.rankinglist {
  width: 982px;
  border: 1px solid #ccc;
  margin: 0 auto;
  display: flex;
}
.right {
  width: 740px;
  /* border: 1px solid green; */
}
.right p {
  font-size: 20px;
}
.right-one .biaoshengbf {
  width: 660px;
  height: 158px;
  /* border: 1px solid green; */
  margin: 40px 40px 40px 40px;
  display: flex;
}
.biaoshengimg {
  width: 155px;
  height: 155px;
  border: 1px solid rgb(206, 206, 206);
}
.biaoshengimg img {
  padding: 3px 3px 3px 3px;
}
.biaoshenginfo {
  width: 473px;
  height: 114px;
  /* border: 1px solid green; */
  margin: 20px 20px 20px 20px;
}
.biaoshenginfo .xddmmk {
  margin: 15px 0 28px;
}
.biaoshenginfo .xddmmk img {
  width: 13px;
  height: 13px;
}
.biaoshenginfo .xddmmkt img {
  border-radius: 15%;
  width: 70px;
  height: 31px;
}
.songlist {
  width: 675px;
  height: 35px;
  border-bottom: 2px solid rgb(187, 5, 5);
  margin: 0 auto;
  line-height: 35px;
}
.songlist h3 {
  font-size: 20px;
  font-weight: inherit;
  display: inline-block;
  margin-right: 20px;
}
.songlist strong {
  color: rgb(187, 5, 5);
}
.songlist .bofang {
  margin-left: 400px;
}
.right-one .tablebur {
  margin: 0 auto;
  margin-bottom: 40px;
}
.comment {
  height: 1000px;
  margin-top: 20px;
  /* border: 1px solid green; */
}
.comment-title {
  width: 670px;
  height: 150px;
  /* border: 1px solid green; */
  margin: 0 auto;
}
.comment-textarea {
  display: flex;
}
.comment-textarea textarea {
  margin-top: 10px;
}
.comment-textarea img {
  width: 50px;
  height: 50px;
  margin: 10px;
}
.nice {
  width: 599px;
  height: 35px;
  /* border: 1px solid green; */
  display: block;
  margin-left: 70px;
  display: flex;
}
.nice img {
  width: 23px;
  height: 23px;
}
.nice .pinlunbtn {
  margin-left: 470px;
  margin-top: 5px;
}
.songlist-1 {
  width: 675px;
  height: 30px;
  border-bottom: 1px solid rgb(201, 201, 201);
  margin: 0 auto;
  line-height: 35px;
  margin-top: 20px;
}
.commentlist {
  width: 670px;
  height: 102px;
  padding: 15px 0;
  /* border: 1px solid green; */
  border-bottom: 1px dotted gray;
}
.flex {
  display: flex;
}
.commentlist img {
  width: 50px;
  height: 50px;
  margin: 10px;
}
.commentnice {
  width: 600px;
  height: 20px;
  /* border: 1px solid green; */
  margin-left: 62px;
  line-height: 20px;
  padding-left: 7px;
}
.commentnice span {
  color: gray;
}
.commentnice .dianzan {
  display: inline-block;
  margin-left: 350px;
}
.commentnice .dianzan .niceshu {
  margin: 0 8px 0 0;
}
</style>
